<template>
  <div class="bigbox">
      <!--搜索栏 -->
      <div class="topbox" :style="{height:isheight+'px'}">
        <el-form :model="form" ref="form"  label-position="left" label-width="70px" >
           <el-row :gutter="20">
            <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect 
                ref="yonghu" 
                :optionlist="yonghulist" 
                :valuekey="{name:'name',value:'id'}"
                @changeselect="changeqiye"
                :defaultvalue="companyId"
                ></FilterSelect>
            </el-form-item>
          </el-col>
          <el-col  :span="5">
            <el-form-item label="能源类型">
              <el-select v-model="form.energyTypeId" placeholder="请选择能源类型"  size="small"  @change="$forceUpdate()" style="width: 100%;"> 
                <el-option v-for="(item,index) in leixinglist" :key="index" :label="item.name" :value="item.code" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" >
                <el-form-item label="能源等级">
                  <el-select v-model="form.attritionLevel" placeholder="请选择能源等级"  size="small"  @change="$forceUpdate()" style="width: 100%;">
                    <el-option v-for="(item,index) in dengjilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col  :span="6" style="margin-top: 4px;display: flex;">
                    <el-radio-group v-model="form.dateType" size="small" style="margin-right: 10px;">
                    <el-radio-button  label="1">日</el-radio-button>
                    <el-radio-button  label="2">月</el-radio-button>
                    <el-radio-button  label="3">年</el-radio-button>
                  </el-radio-group>
                    <el-date-picker v-if="form.dateType=='1'" v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" style="flex: 1;"></el-date-picker>
                    <el-date-picker v-else-if="form.dateType=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" style="flex: 1;"></el-date-picker>
                    <el-date-picker v-else v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small" style="flex: 1;"></el-date-picker>
              </el-col>
          <el-col :span="3" style="text-align: right;">
              <div style="margin-top: 4px;" >
                <el-button  size="small"  @click="chongzhi">重 置</el-button>
                <el-button  type="primary" size="small" @click="getdatalist">查 询</el-button>
              </div>
          </el-col>
           </el-row>
        </el-form>
      </div>
    <div class="borderbox" :style="{height: `calc(${num}% - ${number}px)`}">
      <div class="titlebox">
        <div>
          <span class="littlebox">
            <span><img src="../../../../assets/energy-consumption/Basic-analysis/total.png" alt=""></span>
            <span>总用电量</span>
            <span class="number">{{ (entity.value)?.toFixed(2) }} <span style="font-size: 14px;">kWh</span></span>
          </span>
          <span class="littlebox">
            <span><img src="../../../../assets/energy-consumption/Basic-analysis/totalsun.png" alt=""></span>
            <span>总损耗量</span>
            <span class="number">{{ (entity.attritionValue)?.toFixed(2) }} <span style="font-size: 14px;">kWh</span></span>
          </span>
          <span class="littlebox">
            <span><img src="../../../../assets/energy-consumption/Basic-analysis/lvzhi.png" alt=""></span>
            <span>损耗率</span>
            <span class="number">{{ (!isNaN(entity.attritionRate) ? parseFloat(entity.attritionRate).toFixed(2) : ' ') }} <span style="font-size: 14px;">%</span></span>
          </span>
        </div>
        <div class="titlebutt"><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="tables">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
        label="损耗级别">
         <template #default="{row}">
          <span>
            {{ row.attritionLevel }}
          </span>
         </template>
      </el-table-column>
        </TableColumn>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page.sync="pageobj.pageNo"
                    :page-size="15"
                    @current-change="getdatalist"
                    :total="+totalCount">
                   </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import TopTile from '@/components/TopTitle/index.vue'
import {getzidianxialaapi} from '@/api/guidelines'
import {getfengxilistapi}from '@/api/energy-consumption/Basic-analysis/Model-Loss'
import TableColumn from '@/components/Table/index.vue'
import {getyongdianlistapi} from '@/api/energy-consumption/Basic-information/medium'
import { getnengyuantypeapi } from '@/api/energy-consumption/Basic-information/gateway'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    FilterSelect,
    TableColumn,
    TopTile
  },
  data() {
    return {
      value1:'',
      value2:'',
      value3:'',
      form:{dateType:'1',attritionModelName:'',attritionLevel:'',energyTypeId:''},
      leixinglist: [],
      yonghulist:[],
      issize: 'medium',
      tableData: [],
      dengjilist:[],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '100' },
        { label: '日期', prop: 'dateTime',  },
        // { label: '损耗级别', prop: 'energyMediumName',},
        { label: '损耗模型名称', prop: 'attritionModelName',},
        { label: '输入电量(kWh)', prop: 'upMeterValue',   },
        { label: '输出电量(kWh)', prop: 'lowMeterValue',   },
        { label: '损耗电量(kWh)', prop: 'attritionValue',   },
        { label: '损耗率(%)', prop: 'attritionRate',   },
      ],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
      isshow:false,
      isheight:80,
      number:90,
      num: 100,
      entity: {},
      companyId:''
    };
  },

  async mounted() {
    this.gettime()
    // 获取用电单位
    const {data:{list}} = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = +localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?companyId:list[0].id)
    // this.form.companyId=list[0].id
    // 获取能源类型并筛选
    const res = await getnengyuantypeapi()
    this.leixinglist = res.data.list
    this.form.energyTypeId = res.data.list[0].code
    // 获取能源类型并筛选
    const dengji = await getzidianxialaapi({ dictType: 'attritionLevel' })
    this.dengjilist = dengji.data.list
    this.getdatalist()
  },

  methods: {
    changeqiye(val) {
      // this.$forceUpdate()
      localStorage.setItem('companyId', val)
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=false
      const { data: { list, totalCount,entity } } = await getfengxilistapi({
        pageNo: this.pageobj.pageNo - 1, pageSize: this.pageobj.pageSize,companyId:this.$refs.yonghu.brandId,
        ...this.form,dateString:this.form.dateType=='1'?this.value1:this.form.dateType=='2'?this.value2:this.value3
      })
      console.log(entity);
      this.entity=entity
      this.tableData = list
      this.totalCount=totalCount
      this.$refs.tabledata.loading=false
    },
     // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('ecm-microservice-biz/ecm/energy/attrition/analysis/data/analyse/exportExcel', {
        ...this.form,dateString:this.form.dateType=='1'?this.value1:this.form.dateType=='2'?this.value2:this.value3
      },'损耗分析')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 重置
    async chongzhi() {
      this.gettime()
      this.form={dateType:'1',attritionModelName:'',attritionLevel:'',companyId:'',energyTypeId:''}
      this.form.companyId=this.yonghulist[0].id
      this.form.energyTypeId = this.leixinglist[0].code
      this.getdatalist()
    },
    // 折叠导航栏面板
    zedie() {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 130
        this.number=140
      } else {
        this.isheight = 80
        this.number=90
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value3 = year.toString()
      this.value2 = year + '-' + month
      this.value1 = year + '-' + month+'-'+day
    },
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
      width: 100%;
      height: 80px;
      background-color: #fff;
      padding:0 20px;
      padding-top: 18px;
      margin-bottom: 10px;
      .chaxun{
        background-color: #1890ff;
        color: #fff;
      }
      .shou{
        color: #1890ff;
        border: none;
        background-color: #fff;
      }
     }
  .borderbox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .titlebox{
      display: flex;
      justify-content: space-between;
      .littlebox{
        margin-right: 36px;
        img{
          vertical-align: middle;
          margin-right: 10px;
          width: 18px;
          height: 18px;
        }
        .icon-haodianzongliang{
          font-size: 18px;
          color: #1890ff;
          margin-right: 10px;
        }
        .number{
          font-size: 18px;
          color: #1890ff;
          margin-left: 5px;
        }
      }
      .titlebutt{
        text-align: right;
        margin-bottom: 10px;
      }
    }
    .tables{
      height: 90%;
      .fenye{
        text-align: right;
        margin-top: 10px;
      }
    }
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
  .el-button{
    width: 60px;
    height: 30px;
  }
}

</style>